<template>
	<view :style="{'padding-top':statusBarHeight + 'px'}">
		<view class="nav-bar">
			<view class="back-btn" @click="back">
				<image src="../../static/house/back.png" mode="widthFix"></image>
			</view>
			<view class="search-info">
				<view class="btn-l">
					<input v-model="searchText" type="text">
					<view class="search-icon">
						<image @click="searchGroup" src="../../static/house/sousuo.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="btn-r" @click="addGroup">
					<image src="../../static/house/add.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="banner">
			<image src="http://c.voofan.com/storage/2020-12-22/5fe1ff8a5fbd4.png" mode="widthFix"></image>
		</view>

		<view class="chat-list">
			<view class="chat-tab">
				<view class="tab-1" :class="index == 2?'active':''" @click="chooseGroup(2)" v-if="searchSwitch">搜索结果</view>
				<view class="tab-1" :class="index == 0?'active':''" @click="chooseGroup(0)">群聊大厅</view>
				<view class="tab-2" :class="index == 1?'active':''" @click="chooseGroup(1)">我的群聊</view>
			</view>
			<view class="chat-users" v-if="index != 2">
				<view class="chat-item" v-for="(d, i) in chatList" :key="i">
					<view class="chat-l">
						<view class="user-face">
							<image :src="d.FaceUrl" mode="widthFix"></image>
						</view>
						<view class="user-data">
							<view class="user-chat-name">{{d.Name}}</view>
							<view class="user-chat-tag d-flex">
								<view class="user-chat-num chat-tag-1 d-flex">
									<image src="../../static/house/renshu.png" mode="widthFix"></image>
									<text>{{d.MemberNum}}</text>
								</view>
								<image v-if="d.is_public" style="width: 38rpx;height: 38rpx;" src="../../static/lock.png" mode=""></image>
								<!-- <view class="zj" v-if="d.is_group === 1">自建</view> -->
							</view>
						</view>
					</view>
					<view class="chat-r">
						<!-- <image @click="verifyCode(d)" v-if="d.is_group === 1" src="../../static/house/join-1.png" mode="widthFix"></image>
						<image @click="verifyCode(d)" v-else src="../../static/house/join-2.png" mode="widthFix"></image> -->
						<view v-if="d.is_group === 1" class="flexItemRightImg" @click="verifyCode(d)">
							报名
						</view>
						<view v-else @click="verifyCode(d)" class="flexItemRightImg">邀请中</view>
					</view>
				</view>
			</view>

			<view class="chat-users" v-if="index == 2">
				<view class="chat-item" v-for="(d, i) in searchList" :key="i">
					<view class="chat-l">
						<view class="user-face">
							<image :src="d.FaceUrl" mode="widthFix"></image>
						</view>
						<view class="user-data">
							<view class="user-chat-name">{{d.Name}}</view>
							<view class="user-chat-tag d-flex">
								<view class="user-chat-num chat-tag-1 d-flex">
									<image src="../../static/house/renshu.png" mode="widthFix"></image>
									<text>{{d.MemberNum}}</text>
								</view>
								<image v-if="d.is_public" style="width: 38rpx;height: 38rpx;" src="../../static/lock.png" mode=""></image>
								<!-- <view class="zj" v-if="d.is_group === 1">自建</view> -->
							</view>
						</view>
					</view>
					<view class="chat-r">
						<image @click="verifyCode(d)" v-if="d.is_group === 1" src="../../static/house/join-1.png" mode="widthFix"></image>
						<image @click="verifyCode(d)" v-else src="../../static/house/join-2.png" mode="widthFix"></image>
					</view>
				</view>
			</view>

		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog type="input" mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close"
			 @confirm="confirm" title="提示" placeholder="请输入密码"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			uniPopupDialog
		},
		data() {
			return {
				chatList: [],
				next: 0,
				index: 0,
				load: true,
				statusBarHeight: 100,
				password: null,
				groupInfo: {},
				chatList_self: [],
				timmer: '',
				searchText: '',
				searchSwitch: false,
				searchType: '群聊大厅',
				searchList: [],
				locationInfo:''
			}
		},
		onShow() {
			setTimeout(() => {
				this.locationInfo = uni.getStorageSync('locationInfo');
				this.chooseGroup(0);
				let sys = uni.getSystemInfoSync()
				this.statusBarHeight = sys.statusBarHeight
			}, 300)
		},
		onLoad() {},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			back() {
				uni.switchTab({
					url: "/pages/message/index"
				})
			},
			searchGroup() {
				this.chatList = []
				this.searchSwitch = true
				this.index = 2
				let data = {
					search: this.searchText
				}
				this.$utils.postrequest('/api/tim/search_group', data, res => {
					if (res.code == 200) {
						// this.searchType = "搜索结果"
						this.searchList = res.data.list
					}
				})
			},
			getGroupPassword() {
				let data = {
					group_id: ''
				}
			},
			confirm(done, value) {
				let formData = {
					group_id: this.groupInfo.GroupId,
					password: value
				}
				this.$utils.postrequest("/api/tim/password_group", formData, res => {
					if (res.code === 200) {
						const that = this;
						this.$utils.postrequest("/api/tim/user_group_sum", {}, res => {
							if (res.code == 200) {
								that.joinGroup(that.groupInfo)
								done()
							} else if (res.code == 300) {
								that.$utils.showLayer('您最多能加入5个群聊')
							} else {
								that.$utils.showLayer(res.msg)
							}
						})
					} else if (res.code === 300) {
						uni.showToast({
							icon: "none",
							title: "密码错误"
						})
					}
				})
			},
			verifyCode(data) {
				this.groupInfo = data
				if (data.is_public) {
					this.open()
				} else {
					if (!this.index) {
						const that = this;
						this.$utils.postrequest("/api/tim/user_group_sum", {}, res => {
							if (res.code == 200) {
								that.joinGroup(data)
							} else if (res.code == 300) {
								that.$utils.showLayer('您最多能加入5个群聊')
							} else {
								that.$utils.showLayer(res.msg)
							}
						})
					} else {
						this.joinGroup(data)
					}
				}
			},
			joinGroup(data) {

				let that = this;
				let promise = this.tim.joinGroup({
					groupID: data.GroupId,
					type: that.$TIM.TYPES.GRP_AVCHATROOM
				});
				promise.then(function(imResponse) {
					// console.log(imResponse)
					// debugger
					switch (imResponse.data.status) {
						case that.$TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意.
							that.$utils.showLayer('等待审核')
							break;
						case that.$TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
							that.$store.commit('createConversationActive', {
								type: "group",
								data: data.GroupId
							})
							uni.setStorageSync('titleText', data.Name);
							uni.setStorageSync('chooseGroup', data.GroupId);
							uni.navigateTo({
								url: '/pages/tim/group'
							})
							// console.log(imResponse.data.group); // 加入的群组资料
							break;
						case that.$TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
							that.$store.commit('createConversationActive', {
								type: "group",
								data: data.GroupId
							})
							uni.setStorageSync('titleText', data.Name);
							uni.setStorageSync('chooseGroup', data.GroupId);
							uni.navigateTo({
								url: '/pages/tim/group'
							})
							break;
						default:
							break;
					}
				}).catch(function(imError) {
					that.$utils.showLayer('当前账户已过期，请重新登录后再操作')
					console.warn('joinGroup error:', imError); // 申请加群失败的相关信息
				});

			},
			chooseGroup(index) {
				uni.showLoading({
					mask: true
				})
				this.chatList = []
				this.index = index;
				if (index == 0) {
					this.next = 0
					this.getChatList();
				} else if (index == 1) {
					this.getChatList1();
				} else if (index == 2) {
					uni.hideLoading()
				}
			},
			getChatList() {
				this.$utils.postrequest("/api/tim/list_group", {
					next: this.next,
					longitude: this.locationInfo.longitude,
					latitude: this.locationInfo.latitude
				}, res => {
					if (res.code == 200) {
						if (res.data.list) {
							this.chatList = [...this.chatList, ...res.data.list];
						}
						uni.hideLoading()
						this.next = res.data.next;
						if (res.data.next === 0) {
							this.load = false;
						}
					}
				})
			},
			getChatList1() {
				this.$utils.postrequest("/api/tim/user_list_group", {
					next: this.next
				}, res => {
					if (res.code == 200) {
						this.chatList = res.data.list
						uni.hideLoading()
						// this.next = res.data.next;
						if (res.data.next === 0) {
							this.load = false;
						}
					}
				})
			},
			addGroup() {
				// this.chatList = []
				uni.navigateTo({
					url: './add-house'
				})
			}
		},
		onReachBottom() {
			if (this.load) {
				this.next++;
				if (this.index == 0) {
					this.getChatList()
				} else {
					this.getChatList1()
				}
			}
		},
	}
</script>

<style>
	.user-chat-tag>view.chat-tag-1 {
		background: linear-gradient(-82deg, #BB89FC, #987FFF);
	}

	.chat-users {
		margin-top: 20rpx;
	}

	.user-chat-tag {
		margin-top: 14rpx;
	}

	.user-chat-tag>view {
		height: 34rpx;
		padding: 0 20rpx;
		border-radius: 17rpx;
		background: linear-gradient(-86deg, #5CCBFF, #5C8CFF);
		font-size: 18rpx;
		color: #fff;
		margin-right: 14rpx;
	}

	.zj {
		line-height: 34rpx;
	}

	.d-flex {
		display: flex;
		align-items: center;
	}

	.d-flex-jsb {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}


	.user-data image {
		width: 20rpx;
	}

	.chat-l {
		display: flex;
		align-items: center;
	}

	.chat-r image {
		width: 154rpx;
	}

	.user-face {
		width: 110rpx;
		height: 110rpx;
		margin-right: 14rpx;
		background: #f5f5f5;
		border-radius: 50%;
		overflow: hidden;
	}

	.user-face image {
		width: 100%;
	}

	.chat-item {
		padding: 24rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #F5F4F4;
	}

	.chat-list {
		padding: 0 30rpx;
	}

	.chat-tab {
		display: flex;
		height: 70rpx;
		line-height: 70rpx;
		color: #9592A2;
		font-size: 26rpx;
	}

	.chat-tab view {
		position: relative;
		margin-right: 50rpx;
	}

	.chat-tab view.active {
		color: #262430;
		font-size: 32rpx;

	}

	.chat-tab view.active::after {
		content: "";
		width: 25rpx;
		height: 10rpx;
		background: #6A6699;
		border-radius: 5rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -12rpx;
	}

	image {
		width: auto;
		display: block;
	}

	.nav-bar {
		height: 70rpx;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		padding-top:100rpx;
	}

	.back-btn {
		width: 50rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
	}

	.back-btn image {
		width: 20rpx;
		
	}

	.search-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: calc(100% - 50rpx);
		height: 70rpx;
	}

	.btn-r {
		width: 60rpx;
		height: 70rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.btn-r image {
		width: 40rpx;
	}

	.btn-l {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 70rpx;
		background: #F9F9F9;
		border-radius: 10rpx;
		width: calc(100% - 60rpx);
	}

	.search-icon {
		width: 70rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-icon image {
		width: 24rpx;
	}

	.btn-l input {
		width: calc(100% - 70rpx);
	}

	.banner {
		padding: 20rpx 20rpx 0;
	}

	.banner image {
		width: 100%;
	}
	.flexItemRightImg {
		// background: url(http://c.voofan.com/static/pages/invite.png) no-repeat;
		background-image: linear-gradient(#6ac7fc, #52b8fa);
		// background-size: 154rpx 62rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		margin-top: 6rpx;
		border-radius: 50rpx;
	}
	.flexItemRightImg {
		width: 154rpx;
		height: 72rpx;
		line-height: 62rpx;
		flex: none;
		padding-top: 6rpx;
	}
</style>
